<template>
    <div class="bz-page">
        <div id="nav" class="nav">
            <div class="bz-router" v-for="(r,i) in $router.options.routes" :key="i">
                <div v-if="r.name">
                    <router-link :to="r.path">{{ r.name }}</router-link>
                    <div class="bz-sub-menus" v-if="r.children && r.children.length > 0">
                        <router-link :to="`${r.path}/${rs.path}`" class="bz-sub-menu" v-for="(rs,j) in r.children"
                                     :key="j">
                            {{rs.name}}
                        </router-link>
                    </div>
                    <div class="bz-delimiter" v-if="i !== $router.options.routes.length - 1">|</div>
                </div>
            </div>
        </div>
        <div class="bz-container">
            <router-view/>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'DefaultLayout',
        components: ['routers'],
        mounted() {
        }
    }
</script>

<style lang="less" scoped>
    .bz-page {
        /*overflow-y: auto;*/
    }

    #nav {
        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }

    .nav {
        /*position: fixed;*/
        height: 50px;
        width: 100%;
        background-color: rgba(147, 219, 191, 0.2);
        display: flex;
        border-bottom: 1px solid rgba(#2dff9b, 0.6);
        box-shadow: 0 -1px 2px 1px #2dff9b;
        justify-content: center;
        align-items: center;

        .bz-router {
            transition: all 1s;
            padding-bottom: 10px;
            margin-top: 8px;

            .bz-sub-menus {
                &::after {
                    position: absolute;
                    display: inherit;
                    border: transparent 5px solid;
                    border-bottom-color: rgba(98, 220, 210, 0.73);
                    width: 0;
                    height: 0;
                    margin-top: -28px;
                    margin-left: 55px;
                    content: '';
                }

                display: none;
                position: absolute;
                background-color: rgba(220, 220, 220, 0.7);
                padding: 10px;
                border: rgba(220, 220, 220, 0.5) 1px solid;
                border-radius: 3px;
                box-shadow: 0px 0px 1px 1px rgba(64, 224, 208, 0.95);
                margin-left: -50px;
                margin-top: 5px;

                .bz-sub-menu {
                    margin-right: 20px;
                }
            }

            &:hover .bz-sub-menus {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .bz-delimiter {
            margin: auto 5px;
            display: inline;
        }
    }

    .bz-container {
        height: calc(100% - 50px);
    }

    .bz-sub-container {
        height: 100%;
        overflow: auto;
    }
</style>
